<style>

</style>

<template>
    <div class="article-carousel">
        <swiper :list="items" :height="height" :aspect-ratio=".5" :auto="auto" dots-position="center" style="width:100%" :interval="2500">
        </swiper>
    </div>
</template>

<script>
    import Swiper from 'vux-components/Swiper'
    import SwiperItem from 'vux-components/Swiper-item'

    export default {
        props: {
            value: { type: String },
            height: { default: () => '200px'},
            auto: { type: Boolean, default: () => true},
        },
        computed: {
            items: ({value}) => {
                let items = JSON.parse(value);

                for (let item of items) {
                    if (item.url) item.url = location.pathname + '#!' + item.url;
                }
                return items
            }
        },
        components: {
            Swiper,
            SwiperItem
        }
    }
</script>
